<template>
  <div class="app-container">
    <el-card>
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="110px">
        <title-line title="基本信息" />
        <el-form-item class="m-t" label="图标名称" prop="iconName">
          <el-input
            class="form-input-large"
            placeholder="请输入图标名称（1-5）"
            v-model.trim="formData.iconName"
            :onkeyup="(formData.iconName = formData.iconName.replace(/[ ]/g, ''))"
            maxlength="5"
            show-word-limit
          >
          </el-input>
        </el-form-item>
        <el-form-item class="m-t" label="图标样式" prop="iconUrl">
          <upload-image
            :isShowTip="true"
            :lazy="true"
            :file-type="['jpg', 'png', 'jpeg']"
            file-pixel="80*80"
            :file-size="1"
            :limit="1"
            :response-fn="handleAvatarUrlResponse"
            @on-change="uploadAvatarUrlChange($event, 'iconUrl')"
            v-model="formData.iconUrl"
          />
        </el-form-item>
        <el-form-item
          class="m-t"
          label="指向位置"
          :prop="formData.pointPlace === 1 ? 'pointPlace' : 'iconPoint'"
        >
          <el-radio-group v-model="formData.pointPlace" @change="handleChange">
            <el-radio :label="1">暂不指定</el-radio>
            <el-radio :label="2">指向路径</el-radio>
          </el-radio-group>
          <el-input
            class="form-input-large"
            style="margin-left: 5px"
            v-if="formData.pointPlace === 2"
            placeholder="请输入指向路径"
            @input="urlChange"
            v-model="formData.iconPoint"
          >
          </el-input>
        </el-form-item>
        <el-form-item class="m-t" prop="iconSort" label="排序位置">
          <el-input-number
            class="form-input-large"
            :min="1"
            :max="9999"
            :step-strictly="true"
            controls-position="right"
            v-model="formData.iconSort"
          ></el-input-number>
          <span class="explain">数字越小排序越靠前</span>
        </el-form-item>
        <el-form-item class="m-t" label="是否启用" prop="isEnable">
          <el-radio-group v-model="formData.isEnable">
            <el-radio :label="true">启用</el-radio>
            <el-radio :label="false">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="footer">
      <el-button plain @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'addMyPage',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      dialogType: 'add',
      options: {
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      },
      formData: {
        iconName: '',
        iconUrl: '',
        iconPoint: '',
        pointPlace: 1,
        iconSort: 99,
        isEnable: true
      },
      rules: {
        iconName: [{ required: true, message: '请输入图标名称', trigger: 'blur' }],
        iconUrl: [{ required: true, message: '请上传图标', trigger: 'change' }],
        iconPoint: [{ required: true, message: '请输入指定路径', trigger: 'blur' }],
        pointPlace: [{ required: true, message: '请选择是否指向路径', trigger: 'change' }],
        isEnable: [{ required: true, message: '请选择是否启用', trigger: 'change' }],
        iconSort: [{ required: true, message: '请输入排序位置', trigger: ['change', 'blur'] }]
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    const { dialogType, id } = this.$route.query
    if (dialogType) this.dialogType = dialogType
    if (id) this.id = id
    if (this.dialogType === 'edit') {
      this.handleDetails()
    }
  },
  mounted() {},
  destroyed() {},
  methods: {
    //获取金刚区详情
    handleDetails() {
      this.$http.finish.getMyPageInfo(this.id).then(res => {
        if (res.status === 200) {
          this.formData = { ...this.formData, ...res.data }
          this.formData.pointPlace = this.formData.iconPoint ? 2 : 1
        }
      })
    },
    //确定
    handleConfirm() {
      this.$refs.elForm.validate(valid => {
        if (valid) {
          this.formData.iconPoint = this.formData.pointPlace === 1 ? '' : this.formData.iconPoint
          const api =
            this.dialogType === 'add' ? this.$http.finish.addMyPage : this.$http.finish.updateMyPage
          const msg = this.dialogType === 'add' ? '新增成功' : '编辑成功'
          let loading = this.$loading(this.options)
          api(this.formData)
            .then(res => {
              if (res.status === 200) {
                this.$message.success(msg)
                this.handleCancel()
                loading.close()
              } else {
                this.$message.error(res.msg)
                loading.close()
              }
            })
            .catch(e => {
              loading.close()
            })
        }
      })
    },
    // 上传门店头像
    handleAvatarUrlResponse(response) {
      return response.data.url
    },
    uploadAvatarUrlChange() {
      if (this.formData.iconUrl) {
        this.$refs.elForm.validateField('iconUrl')
      }
    },

    //取消
    handleCancel() {
      this.$router.go(-1)
    },

    //只能输入英文和特殊字符
    urlChange(val) {
      val = val.trim()
      this.formData.iconPoint = val.replace(/^[\u4e00-\u9fa5]+$/, '')
    },

    //如果切换是否指定路径 清空路径数据
    handleChange() {
      this.formData.iconPoint = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.explain {
  display: block;
  color: #b0b0b0;
  font-size: 12px;
}
</style>
